<template>
  <div>
    <!-- 头部 -->
    <div>
      <el-form ref="form" :model="searchform" inline label-width="80px">
        <el-form-item>
          <el-button @click="add()" type="success" size="small"
            >添加学生</el-button
          >
        </el-form-item>

        <el-form-item>
          <el-tooltip
            effect="dark"
            content="点击进行批量数据的删除"
            placement="top"
          >
            <el-button @click="deletepi()" size="small" type="danger"
              >批量删除</el-button
            >
          </el-tooltip>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="searchform.name"
            size="small"
            placeholder="请输入姓名"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="search()" size="small" type="primary"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格部分 -->
    <div>
      <el-table
        ref="refemptb"
        v-loading="loading"
        :data="list"
        max-height="1000"
        style="width: 100%"
        :row-key="r=> r.emID"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <!-- <el-table
            :data="props"
            style="width: 100%">
            <el-table-column
              prop="emID"
              label="编号"
              width="width">
            </el-table-column>
          </el-table> -->

            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="员工姓名">
                <span>{{ props.row.emName }}</span>
              </el-form-item>
              <el-form-item label="登录账户">
                <span>{{ props.row.loginID }}</span>
              </el-form-item>
              <el-form-item label="手机号码">
                <span>{{ props.row.phone }}</span>
              </el-form-item>
              <el-form-item label="部门">
                <span>{{ props.row.deptName }}</span>
              </el-form-item>
              <el-form-item label="角色">
                <span>{{ props.row.roleName }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>

        <!-- 复选框列 -->
        <el-table-column :reserve-selection="true" type="selection">
        </el-table-column>

        <el-table-column prop="emID" label="编号"> </el-table-column>

        <el-table-column prop="emName" label="姓名"> </el-table-column>

        <el-table-column
          header-align="center"
          align="center"
          prop="loginID"
          label="账户"
        >
        </el-table-column>

        <el-table-column prop="phone" label="手机号码"> </el-table-column>

        <el-table-column sortable prop="emSex" label="性别"> </el-table-column>

        <el-table-column prop="roleName" label="角色"> </el-table-column>

        <el-table-column prop="deptName" label="部门"> </el-table-column>

        <!-- 自定义组件 -->
        <el-table-column width="200" fixed="right" label="操作">
          <!-- 插槽 -->
          <!--  作用域插槽  -->
          <template slot-scope="scope">
            <el-button type="warning" @click="updateemp(scope)" size="mini"
              >修改</el-button
            >

            <el-popconfirm
              confirm-button-text="确定删除"
              cancel-button-text="取消"
              icon="el-icon-info"
              icon-color="red"
              title="确定删除此员工信息？"
              @confirm="deleteemp(scope)"
            >
              <el-button slot="reference" type="danger" size="mini"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="pagebox">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- dialog 弹层  添加 修改 -->
    <!-- :before-close="dialogBeforeClose"  弹层关闭事件 -->
    <el-dialog
      title="修改会员"
      :visible.sync="dialogVisible"
      width="width"
      >

     <el-form
      ref="refform"
      inline
      :rules="rules"
      :model="form"
      label-width="80px"
    >
      <el-form-item prop="emName" label="员工姓名" size="small">
        <el-input
          v-model="form.emName"
          maxlength="10"
          show-word-limit
          placeholder="请输入姓名"
        ></el-input>
      </el-form-item>
      <br />
      <el-form-item label="员工账户" size="small">
        <el-input
          v-model="form.loginID"
          clearable
          placeholder="请输入账户"
        ></el-input>
      </el-form-item>
      <br />
      <el-form-item label="登录密码" size="small">
        <el-input
          v-model="form.pwd"
          show-password
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <br />

      <el-form-item label="手机号码" size="small">
        <!-- 1.属性 prefix-icon='el-icon-message' -->
        <el-input v-model="form.phone" clearable placeholder="请输入密码">
          <!-- slot 插槽 -->
          <i slot="prefix" class="el-icon-phone"></i>
        </el-input>
      </el-form-item>
      <br />
      <el-form-item label="性别" size="small">
        <el-radio-group v-model="form.emSex">
          <el-radio-button label="男"></el-radio-button>
          <el-radio-button label="女"></el-radio-button>
        </el-radio-group>
      </el-form-item>
      <br />

      <el-form-item label="角色">
        <el-select v-model="form.roleID" placeholder="请选中角色">
          <el-option
            v-for="item in roles"
            :key="item.roleID"
            :label="item.roleName"
            :value="item.roleID"
          ></el-option>
        </el-select>
      </el-form-item>

      <br />
      <el-form-item label="状态">
        <el-switch
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="正常"
          inactive-text="冻结"
          v-model="form.status"
        ></el-switch>
      </el-form-item>
    </el-form>

      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save()">确 定</el-button>
      </div>
    </el-dialog>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      dialogVisible:false,
      roles: [
        { roleID: 1, roleName: "管理员" },
        { roleID: 2, roleName: "总经理" },
        { roleID: 3, roleName: "采购经理" },
        { roleID: 4, roleName: "采购员" },
      ],
      list: [],
      url: "/api/Employee",
      total: 0,
      pageSize: 5,
      pageIndex: 1,
      searchform: {
        name: "",
      },
      form:{

      },
      //表单验证规则
      rules: {
        emName: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ]
      },
    };
  },
  methods: {
    //添加
    add() {
        //this.$router.push("/Student/Add");
         this.dialogVisible= true;
         this.form={}; //清空数据
    },
    //修改
    updateemp(scope) {
      console.log("scope: ", scope.row);

      this.dialogVisible= true;
      this.form=JSON.parse(JSON.stringify(scope.row)) ; // 将 行数据赋值给 表单

    },
    //保存
    save(){
      console.log(this.form);
      this.$message.success('修改成功');
      this.dialogVisible = false;
    },
    //删除
    deleteemp(scope) {
      console.log("emID: ", scope.row.emID);
      this.deleteEmployee(scope.row.emID);
    },
    //批量删除
    deletepi() {
      //获取选中行数据
      // 父组件通过 ref 属性获取子组件中的 数据
      console.log(this.$refs.refemptb.selection);
      let selection = this.$refs.refemptb.selection;
      if (selection.length < 1) {
        this.$message.warning("请先选择要删除的员工");
        return;
      }

      this.$confirm("此操作将永久删除员工信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //删除代码  axios

          //this.$message.error('删除失败');

          this.$message.success("删除成功");

          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
        })
        .catch(() => {
          this.$message("已取消删除");
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // });
        });
    },
    search() {
      this.pageIndex = 1;
      this.getEmployeeList();
    },
    //GET 请求获取数据
    getEmployeeList() {
      let that = this;
      that.loading = true;

      axios({
        method: "get", //请求方式,
        url: that.url,
        //post 的参数放入 data 中
        params: {
          pageSize: that.pageSize,
          pageIndex: that.pageIndex,
          name: that.searchform.name,
        },
      })
        .then(function (response) {
          console.log(response.data);
          //将获取到的数据更新到 list 中
          that.list = response.data.list;
          that.total = response.data.count;
          that.pageIndex = response.data.page;
          that.pageSize = response.data.size;
          setTimeout(() => {
            that.loading = false;
          }, 333);
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    //翻页
    handleCurrentChange(page) {
      this.pageIndex = page;
      this.getEmployeeList();
    },
    //每页显示数量的改变
    handleSizeChange(size) {
      this.pageSize = size;
      this.getEmployeeList();
    },

    //POST 请求 发送数据
    addEmployee() {
      let that = this;

      axios({
        method: "post",
        url: "https://localhost:44314/api/Employee",
        //post 的参数放入 data 中
        data: {
          emID: 0,
          emName: "张学友",
          emSex: "男",
          loginID: "zhangxueyou",
          pwd: "123",
          phone: "18333333333",
          roleID: 4,
          headImg: "123123",
          roleName: "管理员",
          deptName: "综合部",
        },
      })
        .then((re) => {
          console.log(re.data);
        })
        .catch((error) => {
          console.log(error);
        });
    },

    //PUT 请求 修改数据
    putEmployee() {
      let that = this;

      axios({
        method: "put",
        url: that.url, //+"?id=23"
        //put 请求时 两个都需要发送数据
        params: {
          id: 23,
        },
        data: {
          emID: 23,
          emName: "刘德华",
          emSex: "男",
          loginID: "liudehua",
          pwd: "123",
          phone: "18333333333",
          roleID: 4,
          headImg: "hhh",
          roleName: "采购员",
          deptName: "采购部",
        },
      })
        .then(function (response) {
          console.log(response.data);
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    //delete 删除数据
    deleteEmployee(id) {
      let that = this;
      axios({
        method: "delete",
        url: that.url,
        params: {
          id: id,
        },
      })
        .then(function (response) {
          console.log(response.data);
          if (response.data) {
            that.$message.success("删除成功");
            that.getEmployeeList();
          } else {
            that.$message.error("删除失败");
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
  created() {
    this.getEmployeeList();
  },
};
</script>

<style>
.pagebox {
  text-align: center;
  padding: 10px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>